<template>
  <div class="statistics">
    <div class="top">
      <!-- 总数据 -->
      <Total></Total>
    </div>

    <div class="one">
      <!-- 地图 -->
      <div class="map">
        <Map></Map>
      </div>
      <!-- 云词 -->
      <div class="tag">
        <EchartsWordcloud></EchartsWordcloud>
      </div>
      <!-- 柱状图 -->
      <div class="bar">
          <Bar></Bar>
      </div>
    </div>

    <!-- 订单明细 -->
    <div class="order">
      <Order></Order>
    </div>
    <div class="two">
      <!-- 饼图 -->
      <div class="pie">
        <Pie></Pie>
      </div>
      <!-- 排行榜 -->
      <div class="list-chart">
        <ListChart></ListChart>
      </div>
    </div>
    <!-- 折线图 -->
    <div class="line-chart">
      <LineChart></LineChart>
    </div>
  </div>
</template>
<script>
import Total from './total.vue';
import Map from './map.vue';
import EchartsWordcloud from './echartsWordcloud.vue';
import Bar from './bar.vue';
import Order from './order.vue';
import Pie from './pie.vue';
import ListChart from './listChart';
import LineChart from './lineChart.vue';

export default {
  components: {
    Total,
    Map,
    EchartsWordcloud,
    Bar,
    Order,
    Pie,
    ListChart,
    LineChart
  }
};
</script>
<style lang="less" scoped>
.map,
.tag,
.bar,
.order,
.pie,
.list-chart,
.line-chart{
  background-color: #fff;
}
.statistics {
  width: 100%;
  background-color: #f0f3f4;
  box-sizing: border-box;
  padding: 10px;
  .one {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
    height: 420px;
    margin-top: 10px;
    .map {
      width: calc(50% - 5px);
      height: 420px;
      margin-right: 10px;
    }
    .tag {
      width: calc(50% - 5px);
      height: calc(50% - 5px);
    }
    .bar {
      height: calc(50% - 5px);
      margin-top: 10px;
    }
  }
  .order {
    height: 340px;
    margin-top: 10px;
  }
  .two {
      display: flex;
      margin-top: 10px;
    .pie {
      width: calc(50% - 5px);
      height: 280px;
      margin-right: 10px;
    }
    .list-chart {
      width: calc(50% - 5px);
      height: 280px;
    }
  }
  .line-chart {
    height: 300px;
    margin-top: 10px;
  }
}
</style>
